<template>
  <div class="proStatistics">
    <!-- <van-empty description="暂无推广" /> -->
    <!-- <van-sticky offset-top="4rem" class="my-sticky"> -->
    <!-- <div class="abstract">
        <div><div >每日</div></div>
        <div><div >每月</div></div>
        <div><div>每年</div></div>
    </div> -->
    
      <div @click="show = true" >选择日期区间{{date}}</div>
<van-calendar v-model:show="show" type="range" @confirm="onConfirm" />
    <van-tabs
      class="my-sticky"
      v-model:active="active"
      title-inactive-color="#fff"
      title-active-color="#fff"
      background="transparent"
      color="#fff"
      :sticky="true"
      offset-top="4rem"
      swipeable
      :scroll="onLoad(true)"
    >
    
      <van-tab
        v-for="(value, index) in navbar"
        :key="index"
        :name="value.code"
        :title="value.name"
      >
      <div v-if="!list.length&&finished">
            <van-empty
              class="custom-image"
              image="https://img.yzcdn.cn/vant/custom-empty-image.png"
              description="暂无推广"
            />
            
          </div>
          <div v-else>
        <van-list
          v-model:loading="loading"
          :finished="finished"
          @load="onLoad"
          :key="2"
        >
          <div class="foods">
            <router-link
              class="food"
              v-for="(value, index) in list"
              :key="index"
              :to="
                '/product/' +
                value.product_id +
                '/' +
                $store.state.userInfo.F_Question
              "
            >
              <div class="img"><img :src="'http://higuang365.com/'+value.pic_url" /></div>
              <div class="info">
                <div class="name">{{ value.ProductName }}</div>
                <div class="foodinfos">
                  <div class="foodinfo">
                    <div class="font">付款金额</div>
                    <div>￥{{ value.TotalPrice }}</div>
                  </div>
                  <div class="foodinfo">
                    <div class="font">我的佣金</div>
                    <div>￥{{ value.CentsPrice }}</div>
                  </div>
                  <div class="foodinfo">
                    <div class="font">购买数量</div>
                    <div>{{ value.Nums }}</div>
                  </div>
                </div>
                <!-- <div class="createtime">{{ value.createtime }} </div> -->
              </div>
            </router-link>
          </div>
         
        </van-list>
          </div>
      </van-tab>
    </van-tabs>
    <!-- </van-sticky> -->
  </div>
</template>
<script>
import { reactive, toRefs } from "vue";
import { getCentsInfolist } from "@/api/profit";
import { useStore } from "vuex";
export default {
  setup() {
    const data = reactive({
      list: [],
      loading: false,
      finished: false,
      Refresh: false,
      navbar: [
        { name: "每日", url: "personalExtension", code: 1 },
        { name: "每月", url: "monthlyStatistics", code: 2 },
        { name: "每年", url: "monthlySettlement", code: 3 },
      ],
      date:'',
      show:false,
      active: 1,
    });
    const store = useStore();
    // console.log("111")
    // const a=data.list;
    // data.list=[];
    // setTimeout(() => {
    //     data.list=a
    //   data.loading= false
    // }, 2000);
    const onLoad = async (update) => {
      update?data.list=[]:'';
    const date = new Date();
      let fromdata = {
        member_id: store.state.userInfo.F_UserId, //当前会员ID
        member_refer_id: store.state.userInfo.F_Question, //店主推广ID
        B_member_ok_time: store.state.userInfo.F_AllowStartTime, //店主资格审批完成时间
        Stime: "", //开始时间
        Etime: "", //结束时间
      };
      switch (data.active) {
        case 1:
          fromdata.Stime = `${date.getFullYear()}-${
            date.getMonth() + 1
          }-${date.getDate()} 00:00:00`;
          fromdata.Etime = `${date.getFullYear()}-${date.getMonth() + 1}-${
            date.getDate() + 1
          } 00:00:00`;
          break;
        case 2:
          fromdata.Stime = `${date.getFullYear()}-${
            date.getMonth() + 1
          }-01 00:00:00`;
          fromdata.Etime = `${date.getFullYear()}-${
            date.getMonth() + 2
          }-01 00:00:00`;
          break;
        case 3:
          fromdata.Stime = `${date.getFullYear()}-01-01 00:00:00`;
          fromdata.Etime = `${date.getFullYear() + 1}-01-01 00:00:00`;
          break;
      }
      const res = await getCentsInfolist(fromdata);
      data.loading = false;
        data.finished = true;
      if (!res[0]||!res[1].length) {
        return true;
      }
      data.list.push(...res[1]);
      return true;
    };
    const formatDate = (date) => `${date.getMonth() + 1}/${date.getDate()}`;
    const onConfirm = (values) => {
      const [start, end] = values;
      data.show = false;
      data.date = `${formatDate(start)} - ${formatDate(end)}`;
    };
    return { ...toRefs(data), onLoad,formatDate,onConfirm };
  },
};
</script>
<style lang="scss" scoped>
.proStatistics {
  margin: 0 1rem;
  font-size: 1.3rem;
  .my-sticky {
    color: #fff;
  }
  .abstract {
    display: flex;
    justify-content: space-around;
    padding: 1rem;
  }

  .foods {
    .food {
      display: flex;
      margin-bottom: 1.5rem;
      background: #fff;
      padding: 1rem;
      border-radius: 1rem;
      overflow: hidden;
      .img {
        width: 10rem;
        border-radius: 1rem;
        overflow: hidden;
        img {
          width: 100%;
        }
      }
      .info {
        margin-left: 1rem;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .name {
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          line-clamp: 2;
          -webkit-box-orient: vertical;
        }
        .createtime {
          color: #aaa;
          text-align: left;
          padding-left: 2rem;
        }
        .foodinfos {
          display: flex;
          justify-content: space-between;
        }
      }
    }
  }
  .font {
    color: #aaa;
    padding: 0.5rem;
  }
}
</style>